<!DOCTYPE html>
<html>
<head>
    <title>JXS Admin 用户管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <#scripts />
    <!-- Fonts -->
    <style type="text/css">
    </style>
</head>

<body class="flat-blue">
    <div class="app-container expanded">
        <div class="row content-container">
            <#header headernames="用户管理 " />
            <#menu code="user" pcode="system" />
            <!-- Main Content -->
            <div class="container-fluid">
                <div class="side-body" id="main">
	                <div class="row">
                		<div class="col-xs-12">
	                		<div class="card">
		                		<div class="card-body">
		                			<div class="row">
		                				<div class="col-sm-12 toolbar">
			                				<button type="button" class="btn btn-info" @click="handleAdd">添加新用户</button>
		                				</div>
				                		<div class="col-sm-12">
				                			<template>
											  <el-table :data="tableData">
											  	<el-table-column type="expand">
											      <template slot-scope="props">
											        <el-form label-position="left" inline class="demo-table-expand" label-width="120px">
											          <el-form-item label="登录名称" >
											            <span>{{ props.row.username }}</span>
											          </el-form-item>
											          <el-form-item label="昵称">
											            <span>{{ props.row.nickname }}</span>
											          </el-form-item>
											          <el-form-item label="手机">
											            <span>{{ props.row.mobile }}</span>
											          </el-form-item>
											          <el-form-item label="邮箱">
											            <span>{{ props.row.email }}</span>
											          </el-form-item>
											          <el-form-item label="注册时间">
											            <span>{{ props.row.registTime }}</span>
											          </el-form-item>
											          <el-form-item label="最后登录时间" >
											            <span>{{ props.row.lastLoginTime }}</span>
											          </el-form-item>
											          <el-form-item label="是否为管理员">
											            <span v-if="props.row.ismanager==1">是</span>
											            <span v-else>否</span>
											          </el-form-item>
											        </el-form>
											      </template>
											    </el-table-column>
											    <el-table-column label="登录名称" prop="username"></el-table-column>
											    <el-table-column label="昵称" prop="nickname"></el-table-column>
											    <el-table-column label="手机" prop="mobile"></el-table-column>
											    <el-table-column label="邮箱" prop="email"></el-table-column>
											    <el-table-column label="状态" prop="status" :formatter="statusFormatter"></el-table-column>
											    <el-table-column label="注册时间" prop="registTime" :formatter="dateTimeLongFormatter"></el-table-column>
											    <el-table-column label="操作">
											      <template slot-scope="scope">
											        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
											        <el-button size="mini" type="primary" @click="handleSet(scope.$index, scope.row)">配置角色</el-button>
											        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
											      </template>
											    </el-table-column>
											  </el-table>
											  <#pagination />
											</template>
					                	</div>
		                			</div>
		                		</div>
	                		</div>
	                	</div>
                	</div>
                </div>
            </div>
        </div>
        <#footer />
	</div>
            <!-- Javascript Libs -->
	<script>
		var vm = new Vue({
		    el: '#main',
		    data: {
	    		tableData: [],
	    		size:10,
	    		current:1,
	    		total:0,
	    		pagesizes:false,
	    		layout:false
		    },
		 
		    // 点击使用的函数
		    methods: {
		        onload:function(){
		        	this.getTableData();
		        },
		    	handleNodeClick:function(data){
		    		vm.pcode = data.code;
		    		vm.getTableData();
		    	},
		    	handleSizeChange(val) {
		          vm.size = val;
		          this.getTableData();
		        },
		        handleCurrentChange(val) {
		          vm.current = val;
		          this.getTableData();
		        },
		        getParams:function(){
		        	var params = new URLSearchParams();
		        	params.append('size', vm.size);
		        	params.append('current', vm.current);
		        	return params;
		        },
		   		getTableData:function(){
		        	axios.post('/user', vm.getParams()).then(function (response) {
		            	var data = response.data.data;
	            		vm.tableData = data.records;
		            	vm.total = data.total;
		              }).catch(function (error) {
		            	  layer.msg(error);
		              });
		   		},
		   		handleAdd:function(){
		    		layer.open({
	    			  type: 2,
	    			  title: '添加',
	    			  shadeClose: false,
	    			  shade: 0.8,
	    			  area: ['800px', '600px'],
	    			  content: '${ctxPath}/role/add' //iframe的url
	    			}); 
		    	},
		        handleEdit(index,row){
		        	layer.open({
	    			  type: 2,
	    			  title: '编辑用户',
	    			  shadeClose: false,
	    			  shade: 0.8,
	    			  area: ['800px', '600px'],
	    			  content: '${ctxPath}/role/edit/'+ row.id
	    			}); 
		        },
		        handleDelete(index,row){
		        	layer.confirm('是否确认删除?', {icon: 3, title:'删除'}, function(index){
		        		axios.post('/role/delete/'+row.id).then(function (response) {
	        		    	layer.close(index);
	        		    	vm.onload();
			            }).catch(function (error) {
			                layer.msg(error);
			            }); 
	        		});
		        },
		        handleSet(index,row){
		        	console.log("前往配置角色页面")
		        	layer.open({
		    			  type: 2,
		    			  title: '配置角色',
		    			  shadeClose: false,
		    			  shade: 0.8,
		    			  area: ['800px', '600px'],
		    			  content: '${ctxPath}/role/set/'+row.id //iframe的url
		    			}); 
		        },
		        statusFormatter(row, column, cellValue, index){
		        	if(cellValue==0){
		   				return "禁用";
		   			}
		   			return "正常";
		        },
		        dateTimeLongFormatter(row, column, cellValue, index){
		        	return DateTime.formatLong(cellValue,"yyyy-MM-dd HH:mm:ss");
		        }
		    }
		});
		vm.onload();
	</script>
</body>

</html>
